<template>
  <div class="background">
    <div class="simple_ticket">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="🚄 单程 " name="first">
          <div class="content">
            <el-form label-width="80px">
              <el-form-item label="出发地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions1"
                  @change="handleChange1"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="到达地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions2"
                  @change="handleChange2"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="出发日期">
                <el-select
                  @change="selectGet"
                  v-model="value"
                  placeholder="请选择时间"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="buy('单程')">立即查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="💺 往返 " name="second">
          <div class="content">
            <el-form label-width="80px">
              <el-form-item label="出发地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions1"
                  @change="handleChange1"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="到达地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions2"
                  @change="handleChange2"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="出发日期">
                <el-select
                  @change="selectGet"
                  v-model="value"
                  placeholder="请选择时间"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="buy('往返')">立即查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="⛽ 接续换乘 " name="third">
          <div class="content">
            <el-form label-width="80px">
              <el-form-item label="出发地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions1"
                  @change="handleChange1"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="到达地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions2"
                  @change="handleChange2"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="出发日期">
                <el-select
                  @change="selectGet"
                  v-model="value"
                  placeholder="请选择时间"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="buy('接续')">立即查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="🚧 退改签 " name="fourth">
          <div class="content">
            <el-form label-width="80px">
              <el-form-item label="出发地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions1"
                  @change="handleChange1"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="到达地">
                <el-cascader
                  size="large"
                  :options="options_position"
                  v-model="selectedOptions2"
                  @change="handleChange2"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item>
                <el-button type="info" @click="change()">立即查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      activeName: 'first',
      options_position: provinceAndCityData,
      selectedOptions1: [],
      selectedOptions2: [],
      findFlight: {},
      value: '',
      options: [{
        value: '选项1',
        label: '七天内'
      }, {
        value: '选项2',
        label: '三天内'
      }, {
        value: '选项3',
        label: '默认'
      }],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    selectGet() {
    },
    handleChange1(value) {
      this.findFlight.start_position = CodeToText[value[1]]
    },
    handleChange2(value) {
      this.findFlight.end_position = CodeToText[value[1]]
    },
    buy(the_way) {
      console.log("起点：" + this.findFlight.start_position)
      console.log("终点：" + this.findFlight.end_position)
      console.log("日期：" + this.value)
      var info = {
        start_position: this.findFlight.start_position,
        end_position: this.findFlight.end_position,
        date: this.value ,
        selectedOptions1:this.selectedOptions1,
        selectedOptions2:this.selectedOptions2,
        way:the_way     
             }
      this.$cookies.set('info', info,'1s');
      console.log(this.$cookies.get('info').start_position)
      this.$router.push('/ticketInquiry')
    },
    change() {
      console.log("起点：" + this.findFlight.start_position)
      console.log("终点：" + this.findFlight.end_position)
      var change = {
        start_position: this.findFlight.start_position,
        end_position: this.findFlight.end_position,
             }
      this.$cookies.set('change', change,'1s');
      console.log(this.$cookies.get('change').start_position)
      this.$router.push('/useref')
    }
  }
}
</script>

<style scoped lang="scss">
.background {
  width: 430px;
  position: absolute;
  margin: -400px 20%;
  z-index: 99;
  .simple_ticket {
    padding-top: 20px;
    padding-left: 15px;
    background-color: #fff;
    width: 410px;
    .content {
      height: 250px;
    }
  }
}
.el-cascader {
  width: 300px;
  .el-input {
    width: 300px;
    .el-input__inner {
      width: 300px;
    }
  }
}
.el-select {
  width: 300px;
  .el-input__inner {
    width: 300px;
  }
}
.el-button--primary {
  width: 300px;
}
.el-button--danger {
  width: 300px;
}
.el-button--success {
  width: 300px;
}
.el-button--info {
  width: 300px;
}
</style>